<template>
  <view class="unit-bg">
    <head-bar-view title="单位详情" title-color="#fff" bg-color="rgba(0,0,0,0)" is-white-back="true"/>
    <view class="scroll-cls">
      <view class="unit-card" style="position: relative">
        <view class="f_row_center unit-head-cls">
          <view class="f_column" style="margin-right: 100rpx">
            <view class="item_title" style="color: #FFF5BB;font-size: 36rpx">{{ name }}
            </view>
            <view class="item_text" style="margin-left: 0rpx;color: #A7D2FD;">上报时间：{{ sendstate?postTime:'' }}</view>
          </view>

        </view>
        <view style="position: absolute;top: -10rpx;right: -10rpx">
          <image :src="sendstate?'/static/have_post.png':'/static/wait_post.png'" style="height: 156rpx;width: 225rpx"/>
        </view>
        <view class="f_row_center">
          <view @click="itemClick(item)" style="padding: 20rpx" v-for="(item,ind) in titleList"
                :key="ind"
                class="f_column_center flex_1">
            <view class="item_title" :style="{'color':item.color}" style="font-size: 36rpx">{{ exceedState(item,item.count,item.unit) }}
            </view>
            <view class="item_text" style="margin-left: 0rpx">{{ item.title }}</view>
          </view>
        </view>
        <view class="h_line" style="margin: 0rpx 20rpx"></view>

        <view class="unit-text-cls">
          <view class="f_row_center" style="margin-bottom: 20rpx">
            <image src="/static/tbr.png" style="height: 40rpx;width: 40rpx;margin-right: 10rpx"/>
            <view class="flex_1"> {{ contacts }}</view>
          </view>
          <view class="f_row_center">
            <image src="/static/sjh.png" style="height: 40rpx;width: 40rpx;margin-right: 10rpx"/>
            <view class="flex_1"> {{ contmobile }}</view>
          </view>

        </view>

      </view>
      <view class="f_column_center unit-card">
        <view class="f_row_center" style="flex-flow:wrap;padding: 20rpx">
          <view  v-for="(item,ind) in houseList" :key="ind" class="item-pie">
            <view class="f_row_center item-use-card-cls">
              <image :src="item.img" style="height: 52rpx;width: 58rpx;margin-right: 10rpx"/>
              <view class="f_column">
                <view style="font-size: 24rpx;color: #4B8EF9">{{ item.title }} <span style="color: #E97F2C">{{item.num}}间</span></view>
                <span style=" color: #2360BB;font-size: 32rpx">
                  {{item.area}}
                  <span style="font-size: 24rpx">m²</span>
          </span>
              </view>

            </view>
          </view>
        </view>
      </view>

      <view class="card_common user-num-bg" style="position: relative;padding: 10rpx">
        <view class="f_row_center" style="flex-flow: wrap;z-index: 1;padding: 20rpx">
          <view v-for="(item,ind) in cardList" :key="ind" style="width: 50%;">
            <view class="common-card f_column_center" style="margin:10rpx" :class="[item.bg]">
              <view class="item-title" :class="[item.textBg]"> {{ item.area }} <span style="font-size: 24rpx">m²</span></view>
              <view class="f_column_center" :class="[item.itemBg]" >
                {{ item.title }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <button @click="toDataRatio" class="item-btn">年度数据对比</button>
      <view style="height: 16rpx"></view>
    </view>

  </view>
</template>

<script lang="ts">
import {Vue, Component} from "vue-property-decorator";
import HeadBarView from "@/pages/components/head_bar_view.vue";
import ItemUnitDetailsView from "@/pages/unit/components/item_unit_details_view.vue";
import XRouterConfig from "@/api/XRouterConfig";
import BaseApi from "@/api/BaseApi";
import ApiDefine from "@/api/ApiDefine";
import ItemBlueTitleView from "@/pages/components/item_blue_title_view.vue";
import DataNumCardView from "@/pages/data/components/data_num_card_view.vue";
import {DateUtils} from "@/utils/date_util";

@Component({
  components: {
    HeadBarView,
    ItemUnitDetailsView,
    ItemBlueTitleView,
    DataNumCardView,
  }
})
export default class UnitDetailsView extends Vue {
  titleList = [
    {
      title: '编制人数',
      count: '',
      path: 'unit_user_details',
      unit: '',
      key: 'totalperson',
      color: '#3F77F4',
    },
    {
      title: '楼栋数',
      count: "",
      path: 'unit_house_details',
      unit: '',
      key: 'totalbuild',
      color: '#28AF97',
    },
    {
      title: '超标面积',
      count: '',
      path: 'unit_area_details',
      unit: '㎡',
      key: 'excessivearea',
      color: '#EC6F51',
    },
  ]


  onLoad(option: any) {
    this.initData(option.osid ?? '')
  }

  info: any = {};

  async initData(osid: any) {
    let value = await BaseApi.instance().fetch(ApiDefine.UNIT_DETAILS_URL, {
      osid: osid
    });
    if (value == null || value.code != 200) {
      return;
    }
    this.info = value.data;
    this.setTitleList();
    this.setHouseList();
  }

  houseList: any = [
    {
      title: '办公室',
      area: '',
      num: '',
      areaKey: 'bgsarea',
      numKey: 'bgsnum',
      img: '/static/pzmj.png',
    },
    {
      title: '服务用房',
      area: '',
      num: '',
      areaKey: 'fwyfarea',
      numKey: 'fwyfnum',
      img: '/static/zymj.png',
    },
    {
      title: '设备用房',
      area: '',
      num: '',
      areaKey: 'sbyfarea',
      numKey: 'sbyfnum',
      img: '/static/xzmj.png',
    },
    {
      title: '闲置用房',
      area: '',
      num: '',
      areaKey: 'xzyfarea',
      numKey: 'xzyfnum',
      img: '/static/xzyf.png',
    },

  ];
  cardList = [
    {
      title: '附属用房',
      area: '',
      num: '',
      areaKey: 'fsyfarea',
      numKey: 'fsyfnum',
      itemBg:'sd-item-bg',
      bg:'sd-bg',
      textBg:'sd-text'
    },
    {
      title: '业务用房',
      area: '',
      num: '',
      areaKey: 'ywyfarea',
      numKey: 'ywyfnum',
      itemBg:'sy-item-bg',
      bg:'sy-bg',
      textBg:'sy-text'
    },

    {
      title: '出租用房',
      area: '',
      num: '',
      areaKey: 'czyfarea',
      numKey: 'czyfnum',
      itemBg:'sd-item-bg',
      bg:'sd-bg',
      textBg:'sd-text'
    },
    {
      title: '出借用房',
      area: '',
      num: '',
      areaKey: 'cjyfarea',
      numKey: 'cjyfnum',
      itemBg:'sy-item-bg',
      bg:'sy-bg',
      textBg:'sy-text'
    },
  ]


  setHouseList() {
    this.houseList.forEach((item: any) => {
      item.num = this.info[item.numKey];
      item.area = this.info[item.areaKey];
    })
    this.cardList.forEach((item: any) => {
      item.num = this.info[item.numKey];
      item.area = this.info[item.areaKey];
    })
  }

  //超过
  exceedState(item:any,count:any,unit:any){
    if(item.key!='excessivearea'||(item.key=='excessivearea'&&count>0)||count==''){
      return count+unit;
    }
    return '未超标'
  }

  setTitleList() {
    this.titleList.forEach((item: any) => {
      item.count = this.info[item.key];
    });
  }

  get sendstate() {
    return this.info.sendstate == 1
  }

  get name() {
    return this.info.unitname ?? '';
  }

  get postTime() {
    // return  this.info.lasttime ?? '';
    return DateUtils.dateToString(new Date(this.info.lasttime ?? ''))
  }

  get contacts() {
    return (this.info.contacts ?? '') + `(${this.info.contposition ?? ''})`
  }

  get contmobile() {
    return this.info.contmobile ?? ''
  }

  itemClick(item: any) {
    XRouterConfig.goTo(item.path, {osid: this.info.osid})
  }

  toShowUnit() {

  }

  toDataRatio() {
    XRouterConfig.goTo('unit_data_ratio', {osid: this.info.osid})
  }
}
</script>

<style scoped>
.unit-bg {
  background: linear-gradient(180deg, #3F77F4 0%, rgba(255, 255, 255, 0) 100% );
  width: 100vw;
}

.unit-card {
  box-shadow: 0px 10rpx 30rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 20rpx;
  margin: 30rpx;
  background: #F2F9FF;;
}

.unit-head-cls {
  border-radius: 20rpx 20rpx 0px 0px;
  background: linear-gradient(90deg, #318CF9, #53B4F4);
  padding: 30rpx;
  position: relative;
}

.unit-text-cls {
  font-size: 28rpx;
  color: #333333;
  padding: 20rpx;
}

.item-btn {
  background: linear-gradient(90deg, #64ACF6 0%, #3F77F4 100%);
  box-shadow: 0px 5rpx 15rpx 0px rgba(65, 122, 244, 0.4);
  border-radius: 50rpx;
  height: 100rpx;
  margin: 50rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  color: #FFFFFF;
}

.scroll-cls {
  overflow-y: scroll;
  height: calc(100vh - 176rpx);
}


.use-info-cls {
  background: linear-gradient(0deg, #6BAFF7, #66A0F6);
  border-radius: 20rpx;
  color: #4B8EF9;
}

.item-use-card-cls {
  background: #DBEAFC;
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 10rpx;
}

.item-pie {
  width: 50%;
  font-size: 28rpx;
  /*padding: 20rpx;*/
  /*margin-right: 20rpx;*/
  /*margin-bottom: 20rpx;*/
  /*margin: 10rpx;*/
}

.user-num-bg {
  background: linear-gradient(180deg, #D9E8FD, #FEFEFE);
}


.sd-bg {
  background: linear-gradient(0deg, #C3DFFC, #94C6F8)

}
.sd-text{
  color: #2360BB;
  font-size: 36rpx;
}

.sd-item-bg {
  background: linear-gradient(-90deg, #66ADF6, #5884EB);
  border-radius: 50rpx;
  color: #ffffff;
  font-size: 24rpx;
  text-align: center;
  width: 160rpx;
}
.sy-text{
  color: #E96A4E;
  font-size: 36rpx;
}
.sy-item-bg {
  background: linear-gradient(-90deg, #ED6E52, #E47945);
  border-radius: 50rpx;
  color: #ffffff;
  font-size: 24rpx;
  text-align: center;
  width: 160rpx;
}

.sy-bg {
  background: linear-gradient(0deg, #FCE9D8, #FFD3AD);
}
</style>
